<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <link rel="icon" type="image/svg+xml" href="/vite.svg"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Vite App</title>
    <script type="module" src="/src/main.js"></script>
</head>
<body>
<!--头部-->
<header id="lk_header">
    <!--上部分-->
    <div class="tab-bar d-none d-lg-flex flex-wrap text-center border-bottom text-muted bg-white">
        <div class="container-fluid my-1">
            <div class="row">
                <div class="tab_bar1 col-md-2 border-end border-opacity-50 border-gray-500 position-relative">
                    <a class="link text-dark" style="text-decoration:none" href="#">
                        <i class="bi bi-telephone"></i>
                        <span>关注公众号</span>
                        <div class="qrcode position-absolute translate-middle-x start-50 z-1 d-none"
                             style="top: 100%;">
                            <div class="card card-group rounded-2 p-2">
                                <img class=""
                                     src="./public/images/qcr.png"
                                     width="130px"
                                     alt="二维码"/>
                            </div>

                        </div>
                    </a>
                </div>
                <div class="tab_bar2 col-md-5  border-end border-opacity-50 border-gray-500 ">
                    <i class="icon-link bi-phone"></i>
                    <span>8888-555-6666 (服务时间：9:00-21:00)</span>
                </div>
                <div class="tab_bar3 col-md-2  border-end border-opacity-50 border-gray-500 ">
                    <span>校企合作 培训狮</span>
                </div>
                <div class="tab_bar4 col-md-3  border-opacity-50 border-gray-500 ">
                    <button class="btn btn-md btn-dark">免费注册</button>
                    <button class="btn btn-md btn-outline-dark">立即登录</button>
                </div>
            </div>
        </div>
    </div>
    <!--上部分-->
    <!--导航栏-->
    <nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Image Logo</a>
            <button class="navbar-toggler" type="button" data-bs-target="#navbarContent">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarContent">
                <ul class="navbar-nav mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link" href="javascript:">首页</a>
                    <li class="nav-item">
                        <a class="nav-link" href="javascript:">文档</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button">
                            关于
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Action</a></li>
                            <li><a class="dropdown-item" href="#">Another action</a></li>
                            <li>
                                <hr class="dropdown-divider">
                            </li>
                            <li><a class="dropdown-item" href="#">Something else here</a></li>
                        </ul>
                        <div class="d-lg-none d-xxl-none row justify-content-center mt-2">
                            <button class="btn btn-light col-5 me-1">免费注册</button>
                            <button class="btn btn-outline-light col-5 ms-1">立即登录</button>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!--导航栏-->
</header>
<!--头部-->

<!--轮播-->
<div id="lk_carousel">
    <div id="carouselExampleIndicators" class="carousel slide carousel-dark" data-bs-ride="carousel">
        <!--指示器-->
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0"
                    class="active"
                    aria-current="true"
                    aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
                    aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
                    aria-label="Slide 3"></button>
        </div>
        <!--指示器-->
        <!--图片-->
        <div class="carousel-inner">
            <div class="carousel-item active   ">
                <img src="./public/images/carousel-2.webp"
                     style="height: 230px;"
                     class="d-block w-100"
                     alt="...">
            </div>
            <div class="carousel-item">
                <img src="./public/images/carousel-2.webp"
                     class="d-block w-100"
                     style="height: 230px;"
                     alt="...">

            </div>
            <div class="carousel-item">
                <img src="./public/images/carousel-2.webp"
                     class="d-block w-100"
                     style="height: 230px;"
                     alt="...">
            </div>
        </div>
        <!--图片-->
        <!--切换-->
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
                data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
                data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
        <!--切换-->
    </div>
</div>
<!--轮播-->

<!--关于我们-->
<div id="lk_about" class="py-3">
    <div class="title text-center">
        <h1><strong>关于我们</strong></h1>
        <div class="icon text-dark-emphasis mb-1">
            <i class="bi bi-star"></i>
            <i class="bi bi-star-fill"
               style="font-size: 20px"></i>
            <i class="bi bi-star"></i>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-7">
                <p>确保图标在不同屏幕尺寸和分辨率下都能良好显示,确保图标在不同屏幕尺寸和分辨率下都能良好显示确保图标在不同屏幕尺寸和分辨率下都能良好显示
                    ,确保图标在不同屏幕尺寸和分辨率下都能良好显示。</p>
            </div>
            <div class="col-md-5 d-flex flex-column  align-items-center px-3 py-2">
                <img src="./public/images/carousel-1.webp"
                     class="rounded-1 img-fluid shadow"
                     alt="">

            </div>
        </div>
    </div>
</div>
<!--关于我们-->

<!--产品特色-->
<div id="lk_product" class="py-3">
    <div class="container">
        <div class="row">
            <ul class="nav nav-underline d-flex gap-3 position-relative align-items-center">
                <li class="nav-item" role="presentation">
                    <a class="nav-link active text-dark" data-bs-toggle="tab" href="#tab_content1">软件说明</a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link text-dark" data-bs-toggle="tab" href="#tab_content2">软件介绍</a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link text-dark" data-bs-toggle="tab" href="#tab_content3">软件截图</a>
                </li>
                <li class="position-absolute text-dark" style="right: 5%;">
                    <strong>更多</strong>
                </li>
            </ul>

            <div class="tab-content">
                <!--软件说明-->
                <div class="tab-pane active" role="tabpanel" id="tab_content1">
                    <div class="container mt-3">
                        <div class="row">
                            <div class="col-md-8">
                                <div class="d-flex flex-column">
                                    <div><h3><strong>这是一个标题1</strong></h3></div>
                                    <p>
                                        这是一段介绍内容。这是一段介绍内容。这是一段介绍内容。这是一段介绍内容。这是一段介绍内容。</p>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <img src="./public/images/carousel-1.webp"
                                     class="img-fluid rounded-1 shadow"
                                     alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <!--软件说明-->
                <!--软件介绍-->
                <div class="tab-pane" role="tabpanel" id="tab_content2">
                    <div class="container mt-3">
                        <div class="row">
                            <div class="col-md-4">
                                <img src="./public/images/carousel-2.webp"
                                     class="img-fluid rounded-1 shadow"
                                     alt="">
                            </div>
                            <div class="col-md-8">
                                <div class="d-flex flex-column">
                                    <div><h3><strong>这是一个标题2</strong></h3></div>
                                    <p>
                                        这是一段介绍内容。这是一段介绍内容。这是一段介绍内容。这是一段介绍内容。这是一段介绍内容。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--软件介绍-->
                <!--软件截图-->
                <div class="tab-pane" role="tabpanel" id="tab_content3">
                    <div class="container mt-3">
                        <div class="row">
                            <div class="col-md-8">
                                <div class="d-flex flex-column">
                                    <div><h3><strong>这是一个标题3</strong></h3></div>
                                    <p>
                                        这是一段介绍内容。这是一段介绍内容。这是一段介绍内容。这是一段介绍内容。这是一段介绍内容。</p>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <img src="./public/images/carousel-3.webp"
                                     class="img-fluid rounded-1 shadow"
                                     alt="">
                            </div>
                        </div>
                    </div>
                    <!--软件截图-->
                </div>
            </div>
        </div>
    </div>
</div>
<!--产品特色-->

<!--开发成员-->
<div id="lk_hot" class="py-3">
    <!--标题-->
    <div class="title text-center">
        <h1><strong>开发成员</strong></h1>
        <div class="icon text-dark-emphasis mb-1">
            <i class="bi bi-star"></i>
            <i class="bi bi-star-fill"
               style="font-size: 20px"></i>
            <i class="bi bi-star"></i>
        </div>
    </div>
    <!--标题-->
    <!--内容-->
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="shadow-sm">
                    <div class="row g-0">
                        <div class="col-4 text-center align-self-center">
                            <img src="./public/images/carousel-3.webp"
                                 style="width: 100px;height: 100px;"
                                 class="img-fluid rounded-circle"
                                 alt="...">
                        </div>
                        <div class="col-8 p-1">
                            <div class="card-body">
                                <h5 class="card-title">Card title</h5>
                                <p class="card-text">This is a wider card with supporting text below as a natural
                                    lead-in to additional content.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="shadow-sm">
                    <div class="row g-0">
                        <div class="col-4 text-center align-self-center">
                            <img src="./public/images/carousel-3.webp"
                                 style="width: 100px;height: 100px;"
                                 class="img-fluid rounded-circle"
                                 alt="...">
                        </div>
                        <div class="col-8 p-1">
                            <div class="card-body">
                                <h5 class="card-title">Card title</h5>
                                <p class="card-text"> This content is a little bit longer.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="shadow-sm">
                    <div class="row g-0">
                        <div class="col-4 text-center align-self-center">
                            <img src="./public/images/carousel-3.webp"
                                 style="width: 100px;height: 100px;"
                                 class="img-fluid rounded-circle"
                                 alt="...">
                        </div>
                        <div class="col-8 p-1">
                            <div class="card-body">
                                <h5 class="card-title">Card title</h5>
                                <p class="card-text">This is a wider card with supporting text below</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">

                <div class="shadow-sm">
                    <div class="row g-0">
                        <div class="col-4 text-center align-self-center">
                            <img src="./public/images/carousel-3.webp"
                                 style="width: 100px;height: 100px;"
                                 class="img-fluid rounded-circle"
                                 alt="...">
                        </div>
                        <div class="col-8 p-1">
                            <div class="card-body">
                                <h5 class="card-title">Card title</h5>
                                <p class="card-text">This is a wider card with supporting text below as a natural
                                    lead-in to additional content.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--内容-->
</div>
<!--开发成员-->

<!--友情链接-->
<div id="lk_link" class="py-3">
    <!--标题-->
    <div class="title text-center">
        <h1><strong>友情链接</strong></h1>
        <div class="icon text-dark-emphasis mb-1">
            <i class="bi bi-star"></i>
            <i class="bi bi-star-fill"
               style="font-size: 20px"></i>
            <i class="bi bi-star"></i>
        </div>
        <ul class="logos">
            <li><a href="./"><img src="./public/images/aliyun.png" width="100" alt="..."></a></li>
            <li><a href="./"><img src="./public/images/google.png" width="100" alt="..."></a></li>
            <li><a href="./"><img src="./public/images/txyun.png" width="100" alt="..."></a></li>
            <li><a href="./"><img src="./public/images/azure.png" width="100" alt="..."></a></li>
            <li><a href="./"><img src="./public/images/oracle.png" width="100" alt="..."></a></li>
        </ul>
    </div>
    <!--标题-->
    <!--内容-->
    <div class="container">
        <div class="row">

        </div>
    </div>
    <!--内容-->

</div>
<!--友情链接-->

<!--尾部-->
<footer id="lk_footer" class="py-3 bg-dark">
    <div class="container  text-white">
        <div class="row gap-3">
            <div class="col-md-4 d-inline-block align-self-center text-center">
                <img src="./public/images/carousel-1.webp"
                     width="130px"
                     class="img-fluid rounded-3"
                     alt="">
            </div>
            <div class="col-md-8">
                <p>Copyright © 2021 - 2025 · 练习网页</p>
                <p>
                    本网站资源来自于个人编写或网络收集，仅供学习和研究使用。如有侵犯你的版权，请及时通知我们，本站将立即改正..</p>
                <p>豫ICP备2999999999号</p>
            </div>
        </div>
    </div>
</footer>
<!--尾部-->
</body>
</html>
